{% block sw_sales_channel_modal_grid %}
<sw-grid
    v-if="!isLoading"
    class="sw-sales-channel-modal-grid"
    :items="salesChannelTypes"
    :selectable="false"
    :header="false"
    :table="true"
>
    <template
        #columns="{ item }"
    >
        {% block sw_sales_channel_grid_columns %}
        {% block sw_sales_channel_grid_columns_icon %}
        <sw-grid-column
            flex="85px"
            data-index="icon"
            class="sw-sales-channel-modal-grid__icon-column"
            label="icon"
        >
            <span
                class="sw-sales-channel-modal-grid__icon"
                role="button"
                tabindex="0"
                @click="onOpenDetail(item.id)"
                @keydown.enter="onOpenDetail(item.id)"
            >
                <mt-icon
                    v-if="item.iconName"
                    :name="item.iconName"
                />
            </span>
        </sw-grid-column>
        {% endblock %}

        {% block sw_sales_channel_grid_columns_content %}
        <sw-grid-column
            flex="minmax(150px, 1fr)"
            data-index="content"
            label="content"
        >
            <div class="sw-sales-channel-modal-grid__item-content">
                <h3
                    class="sw-sales-channel-modal-grid__item-name"
                    role="button"
                    tabindex="0"
                    @click="onOpenDetail(item.id)"
                    @keydown.enter="onOpenDetail(item.id)"
                >{{ item.translated.name }}</h3>
                <div
                    class="sw-sales-channel-modal-grid__item-description"
                    role="button"
                    tabindex="0"
                    @click="onOpenDetail(item.id)"
                    @keydown.enter="onOpenDetail(item.id)"
                >{{ item.translated.description }}</div>
            </div>
        </sw-grid-column>
        {% endblock %}

        {% block sw_sales_channel_grid_columns_actions %}
        <sw-grid-column
            flex="auto"
            align="center"
            data-index="actions"
            class="sw-sales-channel-modal-grid__actions"
            label="actions"
        >
            <mt-button
                v-tooltip="{
                    message: $tc('sw-sales-channel.modal.messageNoProductStreams'),
                    showOnDisabledElements: true,
                    disabled: !addChannelAction.disabled(item.id)
                }"
                class="sw-sales-channel-modal__add-channel-action"
                size="small"
                variant="primary"
                :is-loading="addChannelAction.loading(item.id)"
                :disabled="addChannelAction.disabled(item.id)"
                @click="onAddChannel(item.id)"
            >
                {{ $tc('sw-sales-channel.modal.buttonAddChannel') }}
            </mt-button>
        </sw-grid-column>
        {% endblock %}
        {% endblock %}
    </template>
</sw-grid>
{% block sw_sales_channel_modal_grid_loader %}
<sw-loader v-else />
{% endblock %}

<sw-extension-teaser-sales-channel
    v-if="!isLoading"
/>

{% endblock %}
